import React, { Component } from 'react'
import { Modal, List, InputItem, Toast, Button } from 'antd-mobile'
import { CONFIG } from 'api/config'
import { getValidateCode, shopBindWithCreate } from 'api/user'
import { getMerchantUserMsg } from 'api/seller'

import './Login.less'

export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phoneHasError: false,
      codeHasError: false,
      phone: '',
      code: '',
      modal1: false
    }
  }

  onPhoneErrorClick = () => {
    if (this.state.phoneHasError) {
      Toast.info('Please enter 11 digits')
    }
  }
  onPhoneChange = (value) => {
    if (value.replace(/\s/g, '').length < 11) {
      this.setState({
        phoneHasError: true,
      });
    } else {
      this.setState({
        phoneHasError: false,
      });
    }
    this.setState({
      phone: value,
    })
  }

  onCodeErrorClick = () => {
    if (this.state.codeHasError) {
      Toast.info('Please enter 4 digits');
    }
  }
  onCodeChange = (value) => {
    if (value.replace(/\s/g, '').length < 4 || value.replace(/\s/g, '').length > 4) {
      this.setState({
        codeHasError: true,
      });
    } else {
      this.setState({
        codeHasError: false,
      });
    }
    this.setState({
      code: value,
    })
  }

  // 获取验证码
  _getValidateCode = () => {
    let phone = this.state.phone.replace(/\s*/g, "")
    console.log(phone)
    console.log(phone.length)
    if (phone.length !== 11) {
      Modal.alert('提示', '请正确输入手机号码')
      return
    }
    getValidateCode(phone).then((res) => {
      if (res.status === 'error') {
        Toast.info('登录失败')
      } else if (res.msg === '获取成功') {
        Toast.info('验证码已发送到手机')
      }
    })
  }

  // 登录
  _shopBindWithCreate = () => {
    console.log(this.state)
    if (this.state.phoneHasError === true || this.state.codeHasError === true) {
      Modal.alert('提示', '请正确输入手机号码及验证码')
      return
    }
    let opts = {
      relationInfo: JSON.parse(localStorage.getItem('uuRelationInfo')),
      userInfo: {
        phoneNumber: this.state.phone.replace(/\s*/g, ""),
        password: '',
        validateCode: this.state.code
      }
    }
    shopBindWithCreate(opts).then((res) => {
      localStorage.uuToken = res.accessToken
      const usemsg = {
        merchantId: '',
        phone: this.state.phone.replace(/\s*/g, ""),
        shopCode: ''
      }
      getMerchantUserMsg(usemsg).then((res) => {
        let userMsg = {}
        let merchantMsg = {}
        if (res) {
          userMsg = res
          userMsg.isSeller = 1
          merchantMsg = res
          localStorage.merchantMsg = JSON.stringify(merchantMsg)
          localStorage.userMsg = JSON.stringify(userMsg)
        } else {
          userMsg.isSeller = 0
          userMsg.phone = this.state.phone
          localStorage.userMsg = JSON.stringify(userMsg)
        }
        this.props.history.push(`/${CONFIG.APPID}/home`)
        setTimeout(() => {
          window.location.reload()
        }, 200)
      })
    })
  }

  componentDidMount() {
    console.log(this.props)
  }

  render() {
    return (
      <div className="login">
        <List renderHeader={() => '电话号码'}>
          <InputItem
            type="phone"
            placeholder="input your phone"
            error={this.state.phoneHasError}
            onErrorClick={this.onPhoneErrorClick}
            onChange={this.onPhoneChange}
            value={this.state.phone}
          >手机号码</InputItem>
        </List>
        <List renderHeader={() => '验证码'}>
          <InputItem
            type="number"
            placeholder="input your passcode"
            error={this.state.codeHasError}
            onErrorClick={this.onCodeErrorClick}
            onChange={this.onCodeChange}
            value={this.state.code}
          >验证码</InputItem>
        </List>

        <div className="btn-wrapper">
          <div className="btnL">
            <Button type="ghost" onClick={this._getValidateCode.bind(this)}>获取验证码</Button>
          </div>
          <div className="btnR">
            <Button type="primary" onClick={this._shopBindWithCreate.bind(this)}>登录</Button>
          </div>
        </div>

      </div>
    )
  }
}
